Json 编辑工具 json-editor-vue
概述
除了 vue-json-pretty 的只读展示外，json-editor-vue 提供了更强大的 JSON 编辑能力，带有菜单栏、树形视图、代码视图等多种模式。本节介绍 json-editor-vue 的集成和使用，扩展 JSON 编辑场景。
json-editor-vue 简介
| 特性 | 说明 |
|---|---|
| 功能 | JSON 编辑器，支持树形视图、代码视图、预览模式 |
| Vue 支持 | 支持 Vue 3（Vue Next） |
| 底层库 | 基于 josdejong/jsoneditor |
| 特色 | 带菜单栏、支持搜索/排序/筛选 |
安装
npm install json-editor-vue
bash
组件封装
<!-- components/json/JsonPreviewPlus.vue -->
<template>
<div class="json-editor-wrapper">
<JsonEditorVue
v-model="modelValue"
v-bind="$attrs"
:mode="mode"
:modes="modes"
/>
</div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import JsonEditorVue from 'json-editor-vue'
import 'json-editor-vue/dist/style.css'
interface JsonPreviewPlusProps {
modelValue?: Record<string, any> | any[] | string
mode?: 'tree' | 'code' | 'form' | 'text' | 'view'
modes?: string[]
}
const props = withDefaults(defineProps<JsonPreviewPlusProps>(), {
modelValue: () => ({}),
mode: 'tree',
modes: () => ['tree', 'code', 'form', 'text', 'view']
})
const emit = defineEmits<{
(e: 'update:modelValue', value: any): void
}>()
// v-model 双向绑定
const modelValue = computed({
get: () => props.modelValue,
set: (val) => emit('update:modelValue', val)
})
</script>
<style scoped>
.json-editor-wrapper {
width: 100%;
min-height: 300px;
}
</style>
vue
使用方式
<template>
<div class="json-editor-demo">
<h3>JSON 编辑器</h3>
<JsonPreviewPlus
v-model="jsonData"
mode="tree"
/>
<h3>当前数据</h3>
<pre>{{ JSON.stringify(jsonData, null, 2) }}</pre>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import JsonPreviewPlus from '@/components/json/JsonPreviewPlus.vue'
const jsonData = ref({
name: '菜单管理',
path: '/system/menu',
meta: { title: '菜单管理', icon: 'Menu' },
children: []
})
</script>
vue
编辑模式对比
| 模式 | 说明 | 适用场景 |
|---|---|---|
tree | 树形视图（默认） | 可视化编辑，支持增删改查节点 |
code | 代码编辑器 | 直接编辑 JSON 文本 |
form | 表单视图 | 通过表单字段编辑 JSON |
text | 纯文本 | 简单文本编辑 |
view | 只读预览 | 仅查看，不可编辑 |
vue-json-pretty vs json-editor-vue
| 维度 | vue-json-pretty | json-editor-vue |
|---|---|---|
| 定位 | JSON 展示/预览 | JSON 编辑 |
| 编辑能力 | 有限（需配置 editable） | 完善（树形编辑、代码编辑） |
| 菜单栏 | 无 | 有（搜索、排序、展开/折叠） |
| 模式切换 | 无 | 支持 tree/code/form/text/view |
| 包体积 | 轻量 (~30KB) | 较大 (~200KB) |
| 适用场景 | 数据预览、调试 | JSON 配置编辑 |
实践要点
- json-editor-vue 适合需要编辑 JSON 数据的场景，vue-json-pretty 适合只读展示
- 支持
v-model双向绑定，编辑结果自动同步到父组件 v-bind="$attrs"透传属性，支持 jsoneditor 的所有配置项mode属性控制默认编辑模式，modes控制可选模式列表- 注意导入 CSS：
import 'json-editor-vue/dist/style.css'
↑